<template>
  <div id="insurance-type-header">
    <div class="title" :class="color">{{ title }}</div>
    <div class="tip">{{ tip }}</div>
  </div>
</template>

<script>
  export default {
    name: "insurance-type-header",
    props: ['title', 'tip', 'color']
  }
</script>

<style scoped lang="scss">

  #insurance-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.5rem;
    background: $white;
    border-bottom: 1px solid #f5f5f5;

    >.title {

      $title-height: 3rem;

      width: 8rem;
      height: $title-height;
      line-height: $title-height;
      text-align: center;
      font-size: 1.5rem;
      color: $white;
      border-radius: 0 $title-height / 2 $title-height / 2 0;

      &.blue {
        background: #56bbfe;
      }

      &.red {
        background: #f85958;
      }
    }

    >.tip {
      font-size: .9rem;
      color: #999;
      padding-right: 1rem;
    }
  }
</style>
